<template>
  <div class="container container_login">
    <div class="login-wrap">
      <div class="login-left">
        <div class="login-ad"><img src="../../static/img/login_left.png" /></div>
      </div>
      <div class="login-right">
        <div class="login-box">
          <div class="login-title">绑定手机号</div>
          <div class="login-con">
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="phone" placeholder="请输入手机号">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-person.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="code" placeholder="请输入验证码" style="width:255px">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
                <el-button type="primary" :class="['code-btn', disabled ? 'el-button-code-disabled' : '']" @click="bindSendCode" :disabled="disabled">{{ btnTitle }}</el-button>
              </div>
            </div>
            <div class="con-item"><el-button class="login-btn" type="primary" @click="confirm">绑定并登录</el-button></div>
          </div>
        </div>
      </div>
    </div>
    <Copyright />
  </div>
</template>

<script>
import Copyright from '../components/copyright.vue';
import Header from '../components/header';
export default {
  components: { Copyright },
  data() {
    return {
      btnTitle: '获取验证码',
      disabled: false,
      phone: '',
      code: '',
      codeY: '',
      state: '',
      id: '', //绑定第三方id
      seconds: 60
    };
  },
  created() {
    this.codeY = this.$route.query.code;
    this.state = this.$route.query.state;
    this.type = this.$route.query.type;
    this.getCode();
  },
  methods: {
    getCode() {
      console.log('aaa');
      if (this.codeY != '') {
        if (this.type == 'qq') {
          console.log('isqq');
          console.log(this.codeY);
          console.log(this.state);
          //qq
          this.$api('user.pc_qq_login', { code: this.codeY, state: this.state })
            .then(res => {
              this.$message(res.msg);
              if (res.code == 1) {
                if (!localStorage.getItem('schoolInfo')) {
                  this.$api('index.getLogo', {}).then(res => {
                    this.schoolInfo = res.data;
                    localStorage.setItem('schoolInfo', JSON.stringify(res.data));
                  });
                }
                console.log('code==1');
                console.log(res);
                localStorage.setItem('token', res.data.userinfo.token);
                this.$api('user.getuser', { token: res.data.userinfo.token }).then(resUser => {
                  localStorage.setItem('userInfo', JSON.stringify(resUser.data));
                  this.$api('index.userauth', { token: res.data.userinfo.token }).then(resUserAuth => {
                    this.$router.push(resUserAuth.data.jump_path);
                      localStorage.setItem('jump_path', resUserAuth.data.jump_path);
                    localStorage.setItem('userAuth', JSON.stringify(resUserAuth.data));
                  });
                });
              } else {
                console.log('code==0');
                console.log(res);
                this.$message(res.msg);
                this.id = res.data;
                //this.$router.push('/otherLogin');
              }
              // this.$api('user.getuser', { token: this.token }).then(resUser => {
              //   localStorage.setItem('userInfo', JSON.stringify(resUser.data));
              //   this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
              //  // window.location.reload();
              // });
            })
            .catch(re => {
              console.log('catch');
              console.log(re);
            });
        } else {
          console.log('isvx');
          //微信
          this.$api('user.pc_third_login', { code: this.codeY, state: this.state }).then(res => {
            this.$message(res.msg);
            if (res.code == 1) {
              if (!localStorage.getItem('schoolInfo')) {
                this.$api('index.getLogo', {}).then(res => {
                  this.schoolInfo = res.data;
                  localStorage.setItem('schoolInfo', JSON.stringify(res.data));
                });
              }
              localStorage.setItem('token', res.data.userinfo.token);
              this.$api('user.getuser', { token: res.data.userinfo.token }).then(resUser => {
                localStorage.setItem('userInfo', JSON.stringify(resUser.data));
                this.$api('index.userauth', { token: res.data.userinfo.token }).then(resUserAuth => {
                  this.$router.push(resUserAuth.data.jump_path);
                    localStorage.setItem('jump_path', resUserAuth.data.jump_path);
                  localStorage.setItem('userAuth', JSON.stringify(resUserAuth.data));
                });
              });
            } else {
              console.log('vx');
              console.log(res);
              this.$message(res.msg);
              this.id = res.data;
            }
          });
        }
      }
    },
    confirm() {
      this.$api('user.binging', { id: this.id, mobile: this.phone, code: this.code }).then(res => {
        console.log(res)
        console.log(res.code)
         console.log(res.code == 0)
        if (res.code == 0) {
          this.$message(res.msg);
          return;
        }
        if (res.code == 1) {
          if (!localStorage.getItem('schoolInfo')) {
            this.$api('index.getLogo', {}).then(res => {
              this.schoolInfo = res.data;
              localStorage.setItem('schoolInfo', JSON.stringify(res.data));
            });
          }
          localStorage.setItem('token', res.data.token);
          this.$api('user.getuser', { token: res.data.token }).then(resUser => {
            localStorage.setItem('userInfo', JSON.stringify(resUser.data));
            this.$api('index.userauth', { token: res.data.token }).then(resUserAuth => {
              this.$router.push(resUserAuth.data.jump_path);
                localStorage.setItem('jump_path', resUserAuth.data.jump_path);
              localStorage.setItem('userAuth', JSON.stringify(resUserAuth.data));
            });
          });
        }
      });
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie('', '', -1); //修改2值都为空，天数为负1天就好了
    },

    forgetPwd() {
      this.$router.push('/forgetPwd');
    },
    bindSendCode() {
      if (this.phone.trim().length != 11) {
        this.$message.error('请输入正确的手机号码');
        return;
      }
      this.disabled = true;
      this.btnTitle = '请稍候...';
      setTimeout(() => {
        this.doLoop();
      }, 500);

      let formData = {
        mobile: this.phone,
        event: 'binding'
      };
      this.$api('login.sms', formData).then(res => {
        if (res.code == 1) {
          console.log(res);
          this.$message.success('已发送验证码，请查收');
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
          this.seconds = 0;
          this.disabled = false;
          this.btnTitle = '获取验证码';
        }
      });
    },
    doLoop() {
      this.seconds = 60;
      let countdown = setInterval(() => {
        if (this.seconds == 0 || this.disabled == false) {
          clearInterval(countdown);
          this.disabled = false;
          this.btnTitle = '获取验证码';
        } else {
          this.btnTitle = this.seconds + '秒后重试';
          this.seconds--;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped></style>
